import React from 'react'
import propTypes from 'prop-types'
import {connect} from 'dva'
import { Row,Col} from 'antd'
import style from './cityPicker.css'
import {geogroupings, buildings} from '../../assets/office.json'

class cityPicker extends React.Component {
  constructor() {
    super();
    this.state = {
      isChanged:false,
      labelClass:null,
      value:null,
    }
  }

  valueChange(e,a){
    const value = e.target.value;
    this.setState({
      isChanged:true,
      value,
      labelClass:value?style.animated_out:style.animated_in
    });

  }

  render() {
    const {isChanged,labelClass,value} = this.state;
    return (
      <Row >
        <Col sm={20} md={16} lg={14}>
          <form noValidate style={{width:'100%'}} onFocus={()=>{
            if (value){
              return;
            }
            this.setState({
              labelClass:style.animated_out
            });
          }}
          onBlur={()=>{
            if (value){
              return;
            }
            this.setState({
              labelClass:style.animated_in
            });
          }}>
            <Row type='flex'>
              <Col className={style.marketSelect_marketSelectForm} span={18}>
                <select name="city" id="city" onChange={this.valueChange.bind(this)}>
                  {<option value={null}/>}
                  {
                    geogroupings.map((item1, index1) => {
                      if (!item1.parent_id) {
                        return (
                          <optgroup label={item1.name} key={index1}>
                            {
                              item1.children.map((item2, index2) => {
                                return geogroupings.map((item3, index3) => {
                                  if (item2 === item3.id) {
                                    return (
                                      <option value={item3.id} key={index3}>{item3.name}</option>
                                    )
                                  }
                                })
                              })
                            }
                          </optgroup>
                        )
                      }
                    })
                  }
                </select>
                <label className={labelClass} href='label'>
                  <span>可选城市</span>
                </label>
              </Col>
              <button className={style.btn}>查看地点</button>
            </Row>
          </form>
        </Col>
      </Row>
    )
  }
};

export default connect()(cityPicker)
